<template>
    <CrudPage
        :columns="columns"
        :initialFormData="initialFormData"
        v-model:formData="formData"
        :getApi="getGoodsTypeApi"
        :updateApi="updateGoodsTypeApi"
        :deleteApi="deleteGoodsTypeApi"
        :createApi="createGoodsTypeApi"
        deleteMessageKey="title"
    >
        <template #form>
            <AFormItem label="分类名" name="title">
                <AInput v-model:value="formData.title" />
            </AFormItem>
            <AFormItem label="分类描述" name="description">
                <ATextarea v-model:value="formData.description" />
            </AFormItem>
            <AFormItem label="状态" name="status">
                <ASwitch v-model:checked="formData.status" checkedChildren="可用" unCheckedChildren="不可用" :checkedValue="1" :unCheckedValue="0" />
            </AFormItem>
        </template>
        <template #operation="{ record }">
            <AButton @click="$router.push({ name: 'goodsTypeAttribute', query: { goods_type_id: record._id } })" type="link">属性列表</AButton>
        </template>
    </CrudPage>
</template>

<script>
import { defineComponent, reactive, toRefs } from "vue";
import CrudPage from "@/components/CrudPage.vue";
import { getGoodsTypeApi, createGoodsTypeApi, deleteGoodsTypeApi, updateGoodsTypeApi } from "@/api/goods";
export default defineComponent({
    components: {
        CrudPage,
    },
    setup() {
        const initialFormData = {
            title: "",
            description: "",
            status: 1,
        };
        const state = reactive({
            columns: [
                {
                    dataIndex: "_id",
                    title: "ID",
                    width: 10,
                },
                {
                    dataIndex: "title",
                    title: "类型名",
                    width: 10,
                },
                {
                    dataIndex: "description",
                    title: "描述",
                    width: 10,
                },
                {
                    dataIndex: "status",
                    title: "状态",
                    width: 10,
                    customRender: ({ text }) => (text ? "可用" : "不可用"),
                },
                {
                    dataIndex: "updatedTime",
                    title: "更新时间",
                    width: 10,
                    customRender: ({ text }) => text && new Date(text).toLocaleString(),
                },
                {
                    title: "操作",
                    width: 10,
                    dataIndex: "operation",
                    fixed: "right",
                },
            ],
            formData: { ...initialFormData },
        });
        return {
            ...toRefs(state),
            initialFormData,
            getGoodsTypeApi,
            createGoodsTypeApi,
            deleteGoodsTypeApi,
            updateGoodsTypeApi,
        };
    },
});
</script>

<style scoped lang="scss"></style>
